Page({
  data: {
    searchQuery: '',        // 用户输入的搜索内容
    itemList: [             // 假设这是你要搜索的数据
      { id: 1, name: '红米5A，轻巧长续航' },
      { id: 2, name: '红米5，4GB+GB' },
      { id: 3, name: '红米Notebooks，4GB+GB' },
      { id: 4, name: '红米自拍手机S2' },
      { id: 5, name: '红米NoTe5，6GB+64GB' },
    ],
    beforeList: [           // 默认显示的提示项列表
      { id: 1, name: '红米Note5' },
      { id: 2, name: '小米MIX2' },
      { id: 3, name: '小米MIX2S' },
      { id: 4, name: '小米笔记本Pro' },
    ],
    filteredList: [],       // 搜索后显示的结果
    suggestions: [],        // 搜索提示列表
    showSuggestions: false, // 是否显示提示框
    searching: false        // 是否正在搜索
  },

  // 输入框内容变化时触发
  onSearchInput: function (e) {
    const query = e.detail.value.trim(); // 获取用户输入的搜索内容
    this.setData({ searchQuery: query });

    // 根据是否有输入内容，更新搜索状态和提示项
    if (query) {
      this.setData({ searching: true });
    } else {
      this.setData({ searching: false });
    }

    // 处理提示项显示
    if (!query) {
      this.setData({ showSuggestions: false, suggestions: this.data.beforeList });
      this.filterList(query);
      return;
    }

    // 根据输入内容进行模糊查询
    this.filterSuggestions(query);
    this.filterList(query);
  },

  // 输入框获取焦点时，显示提示框
  onFocus: function () {
    this.setData({ searching: true });
    const query = this.data.searchQuery.trim();
    if (!query) {
      // 没有输入时，显示 beforeList 的提示项
      this.setData({ suggestions: this.data.beforeList, showSuggestions: true });
    } else {
      this.filterSuggestions(query);
    }
  },

  // 根据用户输入进行模糊查询，并展示提示项
  filterSuggestions: function (query) {
    const filtered = this.data.itemList.filter(item =>
      item.name.includes(query)
    );
    this.setData({
      suggestions: filtered,
      showSuggestions: filtered.length > 0
    });
  },

  // 点击提示项时，进行搜索
  onSuggestionClick: function (e) {
    const suggestion = e.currentTarget.dataset.item; // 获取点击项的数据
    if (!suggestion) {
      console.error('点击项的数据不存在');
      return;
    }

    // 更新搜索框内容为点击的建议项
    this.setData({
      searchQuery: suggestion.name,  // 更新搜索框内容
      showSuggestions: false         // 隐藏提示框
    });
    
    this.filterList(suggestion.name);  // 进行搜索
  },

  // 点击搜索结果项时，更新搜索框内容并过滤
  onResultClick: function (e) {
    const result = e.currentTarget.dataset.item; // 获取点击的结果项
    if (!result) {
      console.error('点击项的数据不存在');
      return;
    }

    // 更新搜索框内容为点击的结果项
    this.setData({
      searchQuery: result.name,  // 更新搜索框内容
      showSuggestions: false,    // 隐藏提示框
      searching: true            // 显示搜索状态
    });

    // 过滤显示相关结果
    this.filterList(result.name);
  },

  // 模糊查询过滤列表
  filterList: function (query) {
    if (!query) {
      // 如果搜索框为空，显示所有数据
      this.setData({ filteredList: this.data.itemList });
      return;
    }

    // 模糊查询，筛选出名字包含查询内容的项目
    const filtered = this.data.itemList.filter(item =>
      item.name.includes(query)
    );

    // 更新过滤后的结果
    this.setData({ filteredList: filtered });
  },

  // 页面加载时，显示默认数据
  onLoad: function () {
    this.setData({
      filteredList: this.data.itemList,
      suggestions: this.data.beforeList  // 初始时显示 beforeList
    });
  }
});
